
.container{
  width: 100%;
}
.no_search{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.search{
  width: 100%;
  padding: 0 10%;
  margin-top: 20px;
}
.search .roll{
  width: 100%;
  margin-bottom: 20px;
}
.roll .top{
  height: 200px;
}
.search .roll:last-child{
  margin-bottom: 40px;
}
.roll .cover{
  width: 40%;
  background-image: url('../../../assets/img/image/cover1.png');
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
  height: 200px;
}
.roll .roll_info{
  width: 60%;
  height: 200px;
  background-color: #F2F2F2;
  padding: 20px 0 10px 30px;
}
.roll_info .roll_name{
  margin-bottom: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roll_info .roll_creator{
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roll_info p{
  line-height: 12px;
  margin-bottom: 8px;
}
.roll_info .people_num{
  margin-top: 30px;
  line-height: 20px;
}
.roll_info .people_num .people_logo{
  margin-right: 3px;
}
.roll_info .people_num span{
  vertical-align: middle;
}
.search .roll .bottom{
  width: 100%;
  height: 47px;
}
.bottom input{
  width: 65%;
  height: 100%;
  padding-left: 15px;
  border: none;
  font-size: 14px;
  color: white;
  background-color: #666666;
  -webkit-appearance:none;
  border-radius: 0;
}
.bottom input:focus{
  border: none;
  outline:none;
  -webkit-appearance:none;
}
.bottom button{
  width: 35%;
  height: 100%;
  border: none;
  font-size: 14px;
  color: white;
  background-color: #F88A99;
}
.bottom button:focus{
  border: none;
  outline:none;
}
.bottom ::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: white;
}

.bottom :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: white;
}

.bottom ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: white;
}

.bottom :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

